<template>
  <div class="menu-bar-container">
    <slot></slot>
    <van-tabbar active="active">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="search">学习</van-tabbar-item>
      <van-tabbar-item icon="friends-o">思考</van-tabbar-item>
      <van-tabbar-item icon="setting-o">行动</van-tabbar-item>
      <van-tabbar-item icon="setting-o">成果</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    data(){
      return {
        active: 0,
      }
    },
    components:{},
    computed: {
      ...mapState({
        appName: state=>state.app.appName,
        themeColor: state=>state.app.themeColor,
        collapse: state=>state.app.collapse,
      })
    },
    methods: {
      handleopen() {
        console.log('handleopen')
      },
    }
  }
</script>

<style scoped lang="scss">
  .menu-bar-container {
    /*position: fixed;*/
    /*top: 0px;*/
    /*left: 0;*/
    /*bottom: 0;*/
    /*z-index: 1020;*/
  }

</style>
